<template>
	<view class="content">
		<view class="formBox">
			<view class="title">优惠券类型</view>
			<view class="tag f-c-fs">
				<view class="tabTag active">{{data.typeStr}}</view>
				<view class="blue" v-show="(data.type==1 || data.type==2 || data.type==3 || data.type==5) && data.useArea==2" @click.stop="goSelected(data.type,{optionNo:data.serviceItems})">已选{{data.serviceItemsNum}}项服务</view>
				<view class="blue" v-show="data.type==4 && data.useArea==2" @click.stop="goSelected(data.type,{goodsId:data.serviceItems})">已选{{data.serviceItemsNum}}件商品</view>
				<view class="blue" v-show="data.type==6 && data.useArea==2" @click.stop="goSelected(data.type,{modelId:data.serviceItems})">已选{{data.serviceItemsNum}}辆车型</view>
				<view class="blue" v-show="data.useArea==1">全场通用</view>
			</view>
		</view>
	
		<view class="formBox">
			<view class="title">基础信息</view>
			<view class="label f-c-sb">
				<view>优惠券名称*</view>
				<view class="value">{{data.name}}</view>
			</view>
			<view class="label f-c-sb">
				<view>优惠券金额</view>
				<view class="value">{{data.money}}/元</view>
			</view>
			<view class="label f-c-sb">
				<view>发送节点*</view>
				<view class="value">{{data.sendTypeStr}}</view>
			</view>
			<view class="label f-c-sb">
				<view>使用条件*</view>
				<view class="value">满{{data.conditionMoney}}/元可以使用</view>
			</view>
			<view class="label f-c-sb">
				<view>优惠券总数*</view>
				<view class="value">{{data.sendTotal?data.sendTotal:0}}/张</view>
			</view>
			<view class="label f-c-sb">
        <view>使用门店*</view>
        <view class="value blue" @click="goShowStore({storeId:data.useStores})">已选{{ data.useStoresNum }}个门店</view>
      </view>
			<view class="label">
				<view>使用说明</view>
				<view class="value">{{data.useNotice?data.useNotice:"无"}}</view>
			</view>
			
		</view>
				
		<view class="formBox">
			<view class="title">时间信息</view>
			<view class="label">
				<view>发放时间*</view>
				<view class="value">{{data.sendTimeStart}}--{{data.sendTimeEnd}}</view>
			</view>
      <view class="label">
        <view>使用有效期*</view>
        <view class="value" v-show="data.useTimeType==1">{{ data.useTimeStart }}--{{ data.useTimeEnd }}</view>
        <view class="value" v-show="data.useTimeType==2 && data.useTime">领券后有效天数为{{ data.useTime }}天</view>
        <view v-show="data.useTimeType==3 && data.useTime==0" class="value">领券后永久有效</view>
      </view>
		</view>	
		<u-popup mode="bottom" v-model="typeShow" :closeable="true" border-radius="26">
			<scroll-view scroll-y="true" style="height: 900rpx;padding: 40rpx 0;box-sizing: border-box;" class="">
				<view class="list">
					<view v-if="selectWorkList.length">
						<view class="item boxShadow" v-for="(item, index) in selectWorkList" :key="item.optionNo">
							<view class="item-title f-c-sb">
								<view>工项名称：{{ item.name }}</view>
							</view>
							<view class="pric">标准工时费：{{item.standardFee}}</view>
							<view class="info">门店名称：{{ item.storeBasicName }}</view>
						</view>
					</view>
					<view v-if="selectShopList.length">
						<view class="item boxShadow" v-for="(item, index) in selectShopList" :key="item.gsId">
							<view class="item-title f-c-sb">
								<view>商品名称：{{item.goodsServerName}}</view>
							</view>
							<view>库存：{{item.surplusNumber}} 使用方式：{{item.useWayStr}}</view>
							<view class="pric">商品售价：{{item.costPrice}}</view>
						</view>
					</view>
					<view v-if="selectCarList.length">
						<view class="item boxShadow" v-for="(item, index) in selectCarList" :key="item.modelId">
							<view class="item-title f-c-sb">
								<view>品牌/车系：{{item.brandName}}-{{item.seriesName}}</view>
							</view>
							<view class="info">车型：{{ item.modelName }}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</u-popup>
		<u-popup mode="bottom" v-model="show" :closeable="true" border-radius="26">
			<scroll-view scroll-y="true" style="max-height: 900rpx;padding: 40rpx 0;box-sizing: border-box;" class="">
				<view class="list">					
					<view class="item boxShadow" v-for="(item, index) in selectStroeList" :key="item.storeId">
						<view class="f-c-fs">
							<view class="color color1" :class="'color' + item.storeType">{{ item.storeTypeStr }}</view>
						</view>
						<view class="item-title f-c-sb">
							<view>{{ item.storeName }}</view>
						</view>
						<view class="info">{{ item.address }}</view>
					</view>					
				</view>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
import {couponDetail} from '@/api/marketing.js';
import {showBrandSeriesModelList, showStoreGoodsList, showStoreList, showWorkItemList} from '@/api/index.js'
import {mapGetters} from 'vuex';

export default {
  data() {
    return {
      typeShow: false,
      show: false,
      param: {
        id: ''
      },
      listQuery: {},
      data: {},
      selectCarList: [],
				selectShopList:[],
				selectWorkList:[],
				selectStroeList:[]
			};
		},
		computed: {
		  ...mapGetters(['userInfo'])
		},
		onLoad(option){
			let objParam=JSON.parse(option.param);
			this.param.id=objParam.id;
			this.init();
		},
		methods: {
			init(){
				this.getData();
			},
			getData(){
				couponDetail(this.param).then(res=>{
					console.log(res);
					if(res.code==1){
						this.data=res.data;
					}
				})
			},
			goSelected(type, item) {
				this.typeShow=true;
				switch (type){
					case 4:
						showStoreGoodsList(item).then(res => {
							console.log(res);
							this.selectShopList=res.data;
						});
						break;
					case 6:
						showBrandSeriesModelList(item).then(res => {
							console.log(res);
							this.selectCarList=res.data;
						});
						break;
					default:
						showWorkItemList(item).then(res => {
							console.log(res);
							this.selectWorkList=res.data;
						});
				}
				
			},
			goShowStore(item){
				showStoreList(item).then(res=>{
					this.show=true;
					this.selectStroeList=res.data;
					console.log(item);
					console.log(res.data);
				})
			}
		}
	}
</script>

<style lang="less">
.content {
	width: 100%;
	min-height: 100vh;
	background: #f5f5f5;
	padding: 20rpx 0;
	box-sizing: border-box;
	font-family: "微软雅黑";
	.formBox{
		padding:30rpx;
		.tag{
			padding:20rpx 0;
			.tabTag{
				width: 180rpx;
				height: 70rpx;
				background-color: #d3d3d3;
				color:#fff;
				text-align: center;
				line-height: 70rpx;
				border-radius: 5rpx;
			}
			.active{
				background-color: #177fff;
			}
			.blue{
				color:#177fff;
				padding-left: 10rpx;
			}
		}
		.title{
			border-bottom: none;
		}
		.label{
			border-bottom: 1px solid #eee;
			line-height: 80rpx;
			font-size: 30rpx;
			.value{
				color: #333;
				font-size: 32rpx;
				line-height: 60rpx;
			}
			.blue{
				color:#177fff;
				padding-left: 10rpx;
			}
		}
		.label:last-child{
			border-bottom: none;
		}
		
		
	}
	
}
.list {
	width: 100%;
	.item {
		width: 660rpx;
		background: #ffffff;
		border-radius: 18rpx;
		margin: 23rpx auto;
		padding: 30rpx;
		box-sizing: border-box;
		.color {
			width: 110rpx;
			height: 36rpx;
			opacity: 1;
			background: #177fff;
			border-radius: 6rpx;
			font-size: 24rpx;
			font-weight: 700;
			text-align: center;
			color: #ffffff;
			line-height: 36rpx;
			margin-right: 18rpx;
			&.color1 {
				background: #177fff;
			}
			&.color2 {
				background: #ff6738;
			}
			&.color3 {
				background: #f54170;
			}
			&.color4 {
				background: #2db2ad;
			}
		}
	}
	.item-title {
		font-size: 28rpx;
		font-weight: 700;
		color: #131313;
		margin: 20rpx 0;
	}
	.info {
		font-size: 24rpx;
		font-weight: 500;
		color: #666666;
		line-height: 36rpx;
	}
}

</style>
